<template>
    <section class="form-container">
        <el-form ref="formRef" :inline="true" :model="filter" size="mini" class="form-filter">
            <el-row>
                <el-col :span="18">
                    <el-form-item label="商品分类" prop="goodsClassId" size="mini">
                        <el-cascader
                            v-model="filter.cascaderPath"
                            :options="goodsClassList"
                            :props="{ value: 'id',label:'goodsClassName' }"
                            :show-all-levels="false"
                            clearable
                            @change="changeGoodsClass"></el-cascader>
                    </el-form-item>

                    <el-form-item label="品牌" prop="brandId" size="mini">
                        <el-select v-model="filter.brandId" placeholder="请选择" @change="getDesignList()" clearable>
                            <el-option
                                v-for="item in brandList"
                                :key="item.id"
                                :label="item.brandName"
                                :value="item.id"
                            />
                        </el-select>
                    </el-form-item>

                    <el-form-item label="商品系列" prop="designId" size="mini">
                        <el-select v-model="filter.designId" placeholder="请选择" clearable>
                            <el-option
                                v-for="item in designList"
                                :key="item.id"
                                :label="item.designName"
                                :value="item.id"
                            />
                        </el-select>
                    </el-form-item>

                    <el-form-item label="是否上架" prop="isShelf" size="mini">
                        <el-select v-model="filter.isShelf" placeholder="请选择" clearable>
                            <el-option key="true" label="已上架" value="true"/>
                            <el-option key="false" label="未上架" value="false"/>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="库存" size="mini">
                        <el-input v-model="filter.minStorage" type="number" placeholder="最小"
                                  style="display: inline-block; width:80px;"/>
                        -
                        <el-input v-model="filter.maxStorage" type="number" placeholder="最大"
                                  style="display: inline-block; width:80px;"/>
                    </el-form-item>
                    <el-form-item label="商品名称" prop="goodsName">
                        <el-input v-model="filter.goodsName" placeholder="请输入条件查询"/>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="getPage()" icon="el-icon-search">查询</el-button>
                        <el-button @click="resetFilter()" icon="el-icon-refresh-left">重置</el-button>
                        <el-button @click="showUpdate(0)" icon="el-icon-plus">添加</el-button>
                    </el-form-item>
                </el-col>
                <el-col :span="6" style="text-align: right;">
                    <el-form-item>
                        <el-button @click="showBatchUpdateGoodsPrice()" icon="el-icon-refresh">批量更新商品价格</el-button>
                        <el-button @click="toRecommendType()" icon="el-icon-s-flag" style="margin-top:10px;">推荐商品管理</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div class="form-content">
            <el-table
                v-loading="loading"
                style="width: 100%"
                :data="page.records"
                border
                stripe
                :cell-class-name="getCellIndex"
                @cell-click="tableDbEdit"
                :header-cell-style=headerCellStyle
            >
                <el-table-column prop="id" label="ID" width="80"/>
                <el-table-column prop="thumbnail" label="图片" width="72">
                    <template #default="scope">
                        <el-image style="width: 50px; height: 50px" :src="scope.row.thumbnail" fit="fit">
                            <div slot="error" class="image-slot"
                                 style="display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;background: #f5f7fa;color: #909399;font-size: 20px;">
                                <i class="el-icon-picture-outline"></i>
                            </div>
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column width="80" prop="goodsClassName" label="商品分类"/>
                <el-table-column width="60" prop="brandName" label="品牌"/>
                <el-table-column width="120" prop="designName" label="系列"/>
                <el-table-column min-width="200" prop="goodsName" label="商品名称"/>
                <el-table-column width="60" prop="goodsPrice" label="价格"/>
                <el-table-column width="70" prop="goodsVipPrice" label="批发价"/>
                <el-table-column width="60" prop="goodsStorage" label="库存"/>
                <!--            <el-table-column width="80" prop="goodsSerial" label="货号"></el-table-column>-->
                <el-table-column width="80" label="是否上架">
                    <template #default="scope">
                        <el-switch
                            v-model="scope.row.isShelf"
                            @change="shelfSwitch(scope.row.isShelf,scope.row.id)"
                        />
                    </template>
                </el-table-column>
                <el-table-column property="sort" sortable label="排序" width="80px">
                    <template #default="scope">
                    <span v-show="!(scope.row.index == coordinate.row && scope.column.index ==coordinate.column)">
                      {{ scope.row.sort }}
                    </span>
                        <el-input
                            v-show="scope.row.index == coordinate.row && scope.column.index ==coordinate.column"
                            ref="sort"
                            v-model="scope.row.sort"
                            size="mini"
                            autofocus
                            @change="submitTableEdit(scope.row)"
                        />
                    </template>
                </el-table-column>
                <el-table-column width="80" prop="updateName" label="更新人"/>
                <el-table-column width="160" prop="updateTime" label="更新时间"/>

                <el-table-column fixed="right" label="操作" width="220">
                    <template #default="scope">
                        <el-button size="mini" style="margin:0 0px 10px 10px;" @click="showUpdate(scope.row.id)">编辑
                        </el-button>

                        <el-popconfirm title="确定删除吗？" @onConfirm="handleDelete(scope.row.id)">
                            <el-button slot="reference" size="mini" style="margin:0 0px 10px 10px;">删除
                            </el-button>
                        </el-popconfirm>

                        <el-button size="mini" style="margin:0 0px 10px 10px;" @click="showRecommendType(scope.row.id)">
                            推荐
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination
                background
                :current-page="page.current"
                :page-sizes="[10, 20, 30, 50,100]"
                :page-size="page.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.total"
                style="margin-top:20px;"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />

            <BatchUpdateGoodsPrice ref="batchUpdateGoodsPriceRef" @refresh="getPage()"/>
        </div>
        <el-drawer
            title="推荐位管理"
            :visible.sync="recommendDrawerVisible"
            custom-class="demo-drawer"
            size="40%"
        >
            <div class="demo-drawer__content" style="padding: 10px;">
                <el-table :data="recommendTypeList" style="width: 100%">
                    <el-table-column prop="recommendTypeName" label="推荐位" width="180"></el-table-column>

                    <el-table-column label="是否推荐">
                        <template #default="scope">
                            <el-switch
                                v-model="scope.row.isRecommend"
                                @change="handleRecommendUpdate(scope.row.isRecommend,scope.row.id)"
                            />
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-drawer>
    </section>
</template>
<script>
import {GoodsApi} from '@/api/mall/goods'
import {GoodsClassApi} from '@/api/mall/goodsClass'
import {BrandApi} from '@/api/mall/brand'
import {Message} from 'element-ui'
import BatchUpdateGoodsPrice from './BatchUpdateGoodsPrice.vue'
import {DesignApi} from "@/api/mall/design";
import {GoodsRecommendTypeApi} from "@/api/mall/GoodsRecommendTypeApi";
import {GoodsRecommendApi} from "@/api/mall/GoodsRecommendApi";


export default {
    name: 'MallGoodsList',
    components: {
        BatchUpdateGoodsPrice
    },
    data() {
        return {
            page: {
                total: 0,
                size: 10,
                current: 1,
                pages: 0,
                records: []
            },
            filter: {
                brandId: '',
                goodsClassId: '',
                designId: '',
                goodsName: '',
                isShelf: '',
                minStorage: '',
                maxStorage: '',
                cascaderPath: []
            },
            loading: false,
            goodsClassList: [], // 商品分类
            brandList: [],
            designList: [], // 系列
            coordinate: {column: -1, row: -1},
            headerCellStyle: {
                "background-color": "#F2F5FC"
            },
            recommendDrawerVisible: false,
            recommendTypeList: [],
            recommendMainGoodsId: 0,
        }
    },
    created() {
        GoodsClassApi.getAllList().then((response) => {
            this.goodsClassList = response
        })

        this.getPage()
    },
    methods: {
        // 获取用户列表
        getPage() {
            if (this.filter.minStorage !== '' && this.filter.maxStorage !== '') {
                if (this.filter.minStorage > this.filter.maxStorage) {
                    Message({
                        message: '最小值不能大于最大值',
                        type: 'warning'
                    })

                    return
                }
            }

            const params = {
                pageIndex: this.page.current,
                pageSize: this.page.size,
                goodsClassId: this.filter.goodsClassId,
                brandId: this.filter.brandId,
                designId: this.filter.designId,
                goodsName: this.filter.goodsName
            }

            if (this.filter.minStorage !== '') {
                params['minStorage'] = this.filter.minStorage
            }

            if (this.filter.maxStorage !== '') {
                params['maxStorage'] = this.filter.maxStorage
            }

            this.loading = true
            GoodsApi.getGoodsMainPage(params).then((response) => {
                response.records.forEach(item => {
                    item.goodsPrice = item.goodsPrice / 100
                    item.goodsVipPrice = item.goodsVipPrice / 100
                })
                this.page = response
                this.loading = false
            }).catch((err) => {
                this.loading = false
            })
        },

        getBrandListByClassId(){
            DesignApi.getBrandListByClassId(this.filter.goodsClassId).then((response) => {
                this.brandList = response
            })
        },

        // 上架状态修改
        shelfSwitch(val, id) {
            const params = {
                id: id,
                isShelf: val
            }

            GoodsApi.updateShelf(params).then((response) => {
            })
        },

        // 删除数据
        handleDelete(id) {
            GoodsApi.deleteGoods(id).then((response) => {
                this.getPage()
            })
        },

        handleSizeChange(val) {
            this.page.size = val
            this.page.current = 1
            this.getPage()
        },

        handleCurrentChange(val) {
            this.page.current = val
            this.getPage()
        },

        showUpdate(mainGoodsId) {
            this.$router.push('/mall/goodsUpdate?mainGoodsId=' + mainGoodsId)
            // this.$refs['updateRef'].showUpdate(data)
        },
        showBatchUpdateGoodsPrice() {
            this.$refs['batchUpdateGoodsPriceRef'].showUpdate()
        },
        toRecommendType() {
            this.$router.push('/mall/goodsRecommendType')
        },
        changeGoodsClass(e) {
            this.filter.goodsClassId = e[e.length - 1]
            this.getBrandListByClassId()
        },
        // 修改排序
        submitTableEdit(row) {
            this.coordinate.column = -1
            this.coordinate.row = -1
            const params = {
                id: row.id,
                sort: row.sort
            }
            GoodsApi.updateSort(params).then((response) => {
            })
        },
        getCellIndex({row, column, rowIndex, columnIndex}) {
            row.index = rowIndex
            column.index = columnIndex
        },
        tableDbEdit(row, column) {
            this.coordinate.row = row.index
            this.coordinate.column = column.index
        },
        getDesignList() {
            const that = this
            that.filter.designId = ''
            DesignApi.getAllList(that.filter).then((response) => {
                that.designList = response
            })
        },
        resetFilter() {
            this.$refs['formRef'].resetFields()
            this.filter.cascaderPath = []
            this.filter.minStorage = ''
            this.filter.maxStorage = ''
            this.getPage()
        },
        /**
         * 获取推荐类型
         * @param mainGoodsId
         */
        showRecommendType(mainGoodsId) {
            this.recommendMainGoodsId = mainGoodsId
            this.recommendDrawerVisible = true
            GoodsRecommendTypeApi.getList(mainGoodsId).then(response => {
                this.recommendTypeList = response
            })
        },
        /**
         * 修改推荐
         * @param isRecommend
         * @param recommendTypeId
         */
        handleRecommendUpdate(isRecommend, recommendTypeId) {
            let dto = {
                "recommendTypeId": recommendTypeId,
                "mainGoodsId": this.recommendMainGoodsId
            }
            if (isRecommend) {
                GoodsRecommendApi.create(dto).then(response => {
                })
            } else {
                GoodsRecommendApi.cancel(dto).then(response => {
                })
            }
        },
    }
}

</script>

<style lang="scss" scoped></style>
